<template>
  <div class="choose">
       <div class="header" >
            <div class="left fl" @click="Return">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="in fl">{{this.$route.query.title}}</div>
        </div>
        <div class="_choose_twoMain">
          <ul class="upper">
            <li class="fl" v-for="(list,index) in upper" :key="index"><span  class="list"  @click="btn(index)" :class="{active:index===phoneIndex}">{{list.name}}</span></li>
          </ul>
          <!-- <div class="sort">
              <p @click="rise">价格升序</p>
              <p @click="drop">价格降序</p>
              <p>销量优先</p>
          </div> -->
          <div class="lower">
            <ul class="mui-table-view">
            <div class="clear"></div>
            <li  class="mui-table-view-cell mui-media" v-for="(todo) in todos" :key="todo.index"   @click="open(todo.g_num_iid,todo.g_title,todo.g_zhuansheng,todo.g_img_thumb)" >
              <div class="list">
                <div class="image">
                  <img v-lazy="todo.g_img_thumb" class="sb_pic fl">
                </div>                 
                        <div class="sb_r fr">
    
                            <h5>{{todo.g_title}}</h5>
    
                            <div class="sb_b">
    
                                <div class="fl">
                                    <p class='mui-ellipsis'>
        
                                    <span class="price">￥{{todo.g_quanhou/100}}</span>
      
                                    <span class="price_under">￥{{todo.g_min_group_price/100}}</span>
        
        
                                </p>
   
                                <div class="quan">
                                    <img class="quan_pic fl" src="/static/img/bg_ticket.png">
                                    <span class="quan_price">￥{{todo.g_coupon_discount/100}}</span>
                                </div>
                                <p>已拼{{todo.g_sold}}单</p>
                                </div>
                                <div class="share  fr">
                                    <img class="share_pic" src="/static/img/share.png">
                                    <p>分享赚￥{{todo.g_zhuansheng}}</p>
                                </div>
        
                            </div>
    
                        </div>    
              </div>  
              <div class="clear"></div>            
            </li>
          </ul>
          </div>
        </div>
  </div>
</template>


<script>
import axios from "axios";
// import ChooseHeader from "../common/header";
export default {
  name: "choose",
  data() {
    return {
      upper: [
        {name:"综合"},
        {name:"优惠券面额"},
        {name:"销量"},
        {name:"价格"}
      ],
      lower: [],
      todos: [],
      phoneIndex: 0,
      page:1
    };
  },
  components: {
    // ChooseHeader
  },
  created() {
    var _this = this;
    var cat_id =this.$route.query.cat_id;
    var title =this.$route.query.title;
    var data;
    var orderby=0;
    this.getData(cat_id,title,orderby);

  },
  mounted:function(){
    var _this=this
    this.scroll(this.todos)
    //  console.log(this) 
  },
  methods: {
     getData: function(cat_id,title,orderby) {
       var _this = this;
        axios.get(
      "/api/common/goodspdd/list",
      {
        params:{
          cat_id:cat_id,
          title:title,
          orderby:orderby
        }
      }      
      ).then(function(res) {
      console.log(res)
        _this.todos=res.data.data;
      });
     },
    scroll:function(data) {
       var _this=this
        // console.log(data)
        let isLoading = false
        window.onscroll = () => {
            // console.log(todos)
            // console.log(document.documentElement.offsetHeight)
            // console.log(window.innerHeight)
            // console.log(document.documentElement.scrollTop)
            let bottomOfWindow = document.documentElement.scrollHeight -document.documentElement.scrollTop - window.innerHeight <= 20
            if (bottomOfWindow && isLoading == false) {
                isLoading = true
                axios.get(
                    "/api/common/goodspdd/list",
                    {
                      params:{
                          page:_this.page+1
                        }
                    }
                    ).then(response => {
                        _this.page++;
                        console.log( _this.page)
                        for(var i=0;i<response.data.data.length;i++){
                            _this.todos.push(response.data.data[i])
                        }
                isLoading = false
            })
            }
        }
    },
    goDetails: function(id) {
      this.$router.push({
        path: "goodDetail",
        query: {
          id: id
        }
      });
    },
    open: function(id,title,num,img) {
      this.$router.push({ 
          path: "goodDetail", 
          query: {
               num_iid: id,
               title:title,
               num:num,
               img:img
                } });
    },
    Return() {
        this.$router.go(-1)
     },
    btn(index) {
      var _this = this;
       _this.phoneIndex = index;
      var cat_id =this.$route.query.cat_id;
      var title =this.$route.query.title;
      if(index==1){
        var orderby=8;
        this.getData(cat_id,title,orderby);
      }else if(index==2){
        var orderby=6;
        this.getData(cat_id,title,orderby);
      }else if(index==3){
         var orderby=10;
        this.getData(cat_id,title,orderby);
      }else{
        this.getData(cat_id,title);
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.active {
  color: #333;
  border-bottom: 2px solid #ff4040;
}
.sort {
  width: 100%;
  height: 1rem;
  background: #f4f4f4;
  position: relative;
  top: 1.3rem;
  display: flex;
  justify-content: center;

  p {
    line-height: 1rem;
    font-size: 0.35rem;
    float: left;
    width: 33%;
    text-align: center;
  }
}

.upper {
  width: 100%;
  height: 1.1rem;
  line-height: .64rem;
  position: fixed;
  color #898989
  background: #ffffff;
  z-index: 1;
}
.upper li{
  width 24%
  text-align center
}
.upper span{
  color #898989
  // display inline-block
  padding 0.1rem .1rem
}
.lower {
  padding-top: 1.2rem;
  border-bottom: 1px solid #f4f4f4;
}

.choose {
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: 999;
}

._choose_header {
  width: 100%;
  z-index: 1;
  height: 1.3rem;
  line-height: 1.3rem;
  font-size: 12px;
  background: white;
  position: fixed;
  -webkit-box-shadow: 0 0 10px #cecece;
  box-shadow: 0 0 10px #cecece;
  text-align: center;
  font-size: 0.41rem;
}

._choose_header i {
  display: block;
  float: left;
  height: 50px;
  padding-left: 0.3rem;
  font-size: 0.71rem;
  color: black;
}

._choose_twoMain {
  margin-top: 1.1rem;
}

.lower_list {
  height: 6.3rem;
  background: white;
  float: left;
  box-sizing: border-box;
  width: 50%;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  float: left;
  margin-top: 0.1rem;
  list-style: none;

  img {
    height: 3.9rem;
    width: 4rem;
    display: block;
    margin: auto;
    padding: 0.5rem;
  }

  p {
    width: 94%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto;
    font-size: 0.35rem;
    text-align: center;
  }

  div {
    text-align: center;
    color: red;
    margin-top: 10px;
    font-size: 0.35rem;
  }
}

._chooseList div {
  text-align: center;
  color: red;
  margin-top: 10px;
  font-size: 0.35rem;
}
.main_box{
    padding-top 1rem
}
.clear{
  clear: both;
}
.tuijian{
  float: left;
  width :50%;
}
.remai{
  float: left;
  width :50%;
}
p{
  font-size .3rem;
  color :#000;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.main_box li{
  margin-top: .1rem;
  overflow hidden;
}
.lunbo{
    position: relative;
}
.search{
    position: absolute;
    top: 0;
    z-index: 4;
    width: 80%;
    border-radius: 5px;
}
.mui-table-view {
		li {
			h1 {
				font-size: .3rem;
			}
			.mui-ellipsis {
				font-size: 12px;
				color: #226aff;
				display: flex;
				justify-content: space-between;
			}
		}
	}
.sb_r{
     margin-right: .2rem;
    width 70%;
}
.share{
    width 27%
    text-align center
}
.share_pic{
  width 1rem
  height 1rem
  margin-bottom .2rem
}
.quan_pic{
    width: 1.8rem;
    height: .8rem;
    margin-right: 10px;
    margin-bottom: 5px;
}
.sb_pic{
    width: 25%
    height 25%
    margin-right: .2rem;
}
span{
    font-size: .3rem;
    color: #000;
}
.quan{
    position: relative;
    margin-top: .18rem;
}
.quan_price{
    position: absolute;
    top: .2rem;
    z-index: 0;
    left: .9rem;
}
.price_under{
    text-decoration: line-through;
    color: #999;
    font-size: .2rem;
}
h5{
  width :200px;
  overflow: hidden;
  text-overflow :ellipsis;
  white-space: nowrap;
    font-size: .32rem;
    color: #000;
}
.main h2 {
  display: block;
  height: 1.3rem;
  background: white;
  font-size: 0.35rem;
  line-height: 1.3rem;
  padding-left: 0.3rem;
}
.header
        width 100%
        height 1.1rem
        z-index 1
        position fixed
        background #ff4040
        color #fff
       
        .in
            width 60%
            height 100%
            line-height 1.1rem
            float left
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            // text-align center
            font-size 0.45rem
        .left
            width 10%; 
            height 100%
            float left
            i 
                font-size: 0.6rem;
                line-height: 1.1rem;
                text-align: center;
                display: block;
        .rigth
            width 10%; 
            height 100%
            float left
</style>
